﻿@model CTM.Web.Models.View.Feedback.FeedbackSearchModel
@using CTM.Web.Utils

@{
    ViewBag.Title = "Feedback";
    Layout = "~/Views/Shared/_Layout.cshtml";
    string active = string.Empty;
    string check = string.Empty;
}

<style type="text/css">
    #feedback-list .list-group-item .btn {
        width: 24px;
        /*border: 1px solid grey;*/
        text-align: center;
    }

    #feedback-content blockquote {
        font-size: 14px;
        padding: 0;
        border-left-width: 0;
        float: left;
        clear: left;
        /*margin-bottom: 0;*/
    }

        #feedback-content blockquote .imgCommentLogo {
            margin-right: 10px;
            float: left;
        }

        #feedback-content blockquote .attribution {
            font-size: 10px;
            text-align: right;
            min-width: 140px;
        }

    .split-panel .panel-body {
        overflow-y: auto;
    }

    .btn.close {
        opacity: 1;
    }

    /*.split-panel {
        width: 100%;
        display: flex !important;
    }

    .split-panel-left, .split-panel-right {
        outline: solid 1px #ccc;
        overflow: auto;
    }

    .split-panel-left {
        width: 50%;
        resize: both;
        height: 120px;
    }

    .split-panel-right {
        flex: 1 1 0;
    }*/
</style>

<form onsubmit="getFeedbacks(event);" class="form-inline">
    <button data-target=".modal-feedback" data-toggle="modal" type="button" class="btn btn-primary">
        <span class="glyphicon glyphicon-plus"></span> Add Feedback
    </button>
    <div class="pull-right">
        <div class="form-group">
            <div class="btn-group" data-toggle="buttons">
                @if (Model.Emoticons.Contains(Emoticon.Smile))
                {
                    active = "active";
                    check = "checked";
                }
                else
                {
                    active = string.Empty;
                    check = string.Empty;
                }
                <label class="btn btn-rbvh btn-success @active">
                    <input type="checkbox" autocomplete="off" @check onchange="$(this).closest('form').submit();"
                           name="Emoticons" value="@Emoticon.Smile"> <span class="fa fa-lg fa-smile-o"></span>
                </label>
                @if (Model.Emoticons.Contains(Emoticon.Neutral))
                {
                    active = "active";
                    check = "checked";
                }
                else
                {
                    active = string.Empty;
                    check = string.Empty;
                }
                <label class="btn btn-rbvh btn-warning @active">
                    <input type="checkbox" autocomplete="off" @check onchange="$(this).closest('form').submit();"
                           name="Emoticons" value="@Emoticon.Neutral"> <span class="fa fa-lg fa-meh-o"></span>
                </label>
                @if (Model.Emoticons.Contains(Emoticon.Frown))
                {
                    active = "active";
                    check = "checked";
                }
                else
                {
                    active = string.Empty;
                    check = string.Empty;
                }
                <label class="btn btn-rbvh btn-danger @active">
                    <input type="checkbox" autocomplete="off" @check onchange="$(this).closest('form').submit();"
                           name="Emoticons" value="@Emoticon.Frown"> <span class="fa fa-lg fa-frown-o"></span>
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group year">
                <input type="text" onchange="$(this).closest('form').submit();" value="@Model.Year" name="Year" class="form-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" placeholder="Keyword" name="Keyword" class="form-control" value="@Model.Keyword" autofocus />
                <div class="input-group-btn">
                    <button class="btn btn-info" type="submit">
                        <span class="glyphicon glyphicon-search"></span> Search
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="split-panel" style="overflow: hidden;">
    <div class="panel panel-default split-panel-left" style="overflow: auto;">
        <div class="panel-heading">
            <h4 class="panel-title">Feedback List</h4>
        </div>
        <div class="panel-body">
            <div class="list-group" style="font-size: 10px;" id="feedback-list">
                @Html.Partial("_FeedbackList", Model.Feedbacks)
            </div>
        </div>
    </div>

    <div class="panel panel-default split-panel-right">
        <div class="panel-heading">
            <h4 class="panel-title">Feedback Content</h4>
        </div>
        <div class="panel-body" id="feedback-content">
            <div role="alert" class="alert text-center">
                <h4>Please select a feedback to view.</h4>
            </div>
        </div>
    </div>
</div>

<div id="modalFeedback" class="modal fade modal-feedback" tabindex="-1" role="dialog" aria-labelledby="modalFeedbackLabel">
    <div class="modal-dialog">
        <form class="modal-content" onsubmit="submitModal(event);">
            <div class="modal-header">
                <button aria-label="Close" data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 id="modalFeedbackLabel" class="modal-title">Feedback</h4>
            </div>
            <div class="modal-body">
                @Html.AntiForgeryToken()
                <input type="hidden" id="FeedbackId" name="Id" />
                <input type="hidden" name="Category" value="Feedback" />

                <div class="form-group">
                    <label for="Emoticon">Emoticon</label><br />
                    <div data-toggle="buttons" class="btn-group">
                        <label class="btn btn-rbvh btn-success active">
                            <input type="radio" value="@Emoticon.Smile" name="Emoticon" id="FeedbackEmoticon" data-val-required="*" data-val="true" checked="checked" />
                            <span class="fa fa-lg fa-smile-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-warning">
                            <input type="radio" value="@Emoticon.Neutral" name="Emoticon" id="FeedbackEmoticon" />
                            <span class="fa fa-lg fa-meh-o"></span>
                        </label>
                        <label class="btn btn-rbvh btn-danger">
                            <input type="radio" value="@Emoticon.Frown" name="Emoticon" id="FeedbackEmoticon" />
                            <span class="fa fa-lg fa-frown-o"></span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="Description">Description</label>
                    <textarea id="FeedbackDescription" name="Description" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="Tags">Tags</label>
                    <input id="FeedbackTags" name="Tags" class="form-control" type="text" @*data-role="tagsinput"*@ />
                </div>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-primary btn-rbvh active">
                        <input type="radio" name="IsPrivate" id="FeedbackIsPrivate" value="False" data-val-required="*" data-val="true" checked="checked" /> Public
                    </label>
                    <label class="btn btn-primary btn-rbvh">
                        <input type="radio" name="IsPrivate" id="FeedbackIsPrivate" value="True" /> Private
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="DeleteFeedbackModal" tabindex="-1" role="dialog" aria-labelledby="DeleteFeedbackModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteFeedbackModalLabel">Delete Feedback</h4>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this feedback?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-ok" data-dismiss="modal">Ok</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="DeleteCommentModal" tabindex="-1" role="dialog" aria-labelledby="DeleteCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteCommentModalLabel">Delete Comment</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid" id="DeleteCommentModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$('#delete-comment-form').submit();">Ok</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <link href="~/Content/Libraries/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <script src="~/Content/Libraries/jqwidgets/jqxcore.js"></script>
    <script src="~/Content/Libraries/jqwidgets/jqxsplitter.js"></script>

    @*<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>*@

    <script type="text/javascript">
        function getFeedbacks(e) {
            var form = e.target;
            if (!form.elements.Year) {
                e.preventDefault();
                alert('Please select a year to view.');
            }
        }

        function submitModal(e) {
            e.preventDefault();
            var url = e.target.elements.Id.value === '' ? '@Url.Action("Create", "Feedback")' : '@Url.Action("Edit", "Feedback")';
            $.post(url, $(e.target).serialize(), function (result) {
                if (result.success) {
                    location.reload();
                } else {
                    alert(result.message);
                }
            });
        }

        function viewContent(id) {
            location.hash = 'feedback-' + id;
            $('#feedback-list > a').removeClass('active');
            $(location.hash).addClass('active');
            $.get('@Url.Action("FeedbackContentPartial", "Feedback")', { id: id }, function (result) {
                if (!result) {
                    $('#feedback-content').html(
                        '<div role="alert" class="alert text-center">'
                        + '<h4>Please select a feedback to view.</h4>'
                        + '</div>'
                    );
                } else {
                    $('#feedback-content').html(result);
                    $('#feedback-content').css('display', 'block');
                    $('#feedback-content .media').css('padding', 0);
                }
            });
        }

        function removeEntity(id, type) {
            //if (!confirm('Are you sure want to delete this feedback?')) return;

            switch (type) {
                case 'Feedback':
                    $.get('@Url.Action("Delete", "Feedback")', { id: id }, function (result) {
                        if (result.success) {
                            $('#feedback-' + id).remove();
                            viewContent(id);
                        }
                    });
                    break;
                case 'Comment':
                    $.get('@Url.Action("Delete", "Comment")', { id: id }, function (result) {
                        if (result.success) {
                            $('#comment-' + id).remove();
                        }
                    });
                    break;
                default:
                    break;
            }
        }

        $(function () {
            // Necessary scripts for Bootstrap Tags Input
            var tags = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '@Url.Action("Tags", "Home")' + '?name=%QUERY',
                    wildcard: '%QUERY',
                    filter: function (list) {
                        return $.map(list, function (tag) {
                            return { name: tag };
                        });
                    }
                }
            });
            tags.initialize();

            $('#FeedbackTags').tagsinput({
                typeaheadjs: {
                    name: 'tags',
                    displayKey: 'name',
                    valueKey: 'name',
                    source: tags.ttAdapter()
                }
            });

            // BEGIN - RELOAD MODAL INFO
            $('#modalFeedback').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var id = button.data('feedback-id'); // Extract info from data-* attributes

                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this);
                var feedback = $('#feedback-' + id);

                // Clear Tags
                modal.find('.modal-body #FeedbackTags').tagsinput('removeAll');

                if (feedback.length === 0) { // Modal for new feedback

                    // Clear Id
                    modal.find('.modal-body #FeedbackId').val('');

                    // Reset Emoticon to Smile
                    modal.find('.modal-body [name="Emoticon"]').closest('.btn.btn-rbvh').removeClass('active');
                    modal.find('.modal-body [name="Emoticon"][value="@Emoticon.Smile"]').prop('checked', true);
                    modal.find('.modal-body .btn.btn-rbvh.btn-success').addClass('active');

                    // Clear Description
                    modal.find('.modal-body #FeedbackDescription').val('');

                    // Reset IsPrivate
                    modal.find('.modal-body [name="IsPrivate"]').closest('.btn.btn-rbvh').removeClass('active');
                    modal.find('.modal-body [name="IsPrivate"][value="False"]').prop('checked', true);
                    modal.find('.modal-body [name="IsPrivate"][value="False"]').closest('.btn').addClass('active');

                } else { // Modal for existing feedback

                    // Assign Id
                    modal.find('.modal-body #FeedbackId').val(id);

                    // Assign Emoticon
                    modal.find('.modal-body #FeedbackEmoticon').closest('.btn.btn-rbvh').removeClass('active');
                    switch (feedback.find('.feedback-emoticon').val()) {
                        case '@Emoticon.Smile':
                            modal.find('.modal-body .btn.btn-rbvh.btn-success').addClass('active');
                            break;
                        case '@Emoticon.Neutral':
                            modal.find('.modal-body .btn.btn-rbvh.btn-warning').addClass('active');
                            break;
                        case '@Emoticon.Frown':
                            modal.find('.modal-body .btn.btn-rbvh.btn-danger').addClass('active');
                            break;
                    }

                    // Assign Description
                    modal.find('.modal-body #FeedbackDescription').val(feedback.find('.feedback-description').text());

                    // Assign IsPrivate
                    modal.find('.modal-body #FeedbackIsPrivate').closest('.btn.btn-rbvh').removeClass('active');
                    modal.find('.modal-body [name="IsPrivate"][value="' + feedback.find('.feedback-isprivate').val() + '"]').closest('.btn').addClass('active');

                    // Assign Tags
                    var tagInput = feedback.find('.feedback-tags input');
                    var tags = tagInput.val().split(',');
                    for (var i = 0; i < tags.length; i++) {
                        if (tags[i] !== '') {
                            modal.find('.modal-body #FeedbackTags').tagsinput('add', tags[i]);
                        }
                    }
                }
            });
            // END - RELOAD MODAL INFO

            // BEGIN - OPEN FEEDBACK CONTENT WHEN URL CONTAINS HASH
            if (location.hash !== '') {
                var id = location.hash.substr(10);
                if ($('#feedback-' + id).length > 0) {
                    viewContent(id);
                }
            }
            // END - OPEN FEEDBACK CONTENT WHEN URL CONTAINS HASH

            // BEGIN - SPLIT-PANE
            var fixedHeight = 600; // this is customizable
            $('.split-panel').jqxSplitter({ width: '100%', height: fixedHeight, panels: [{ size: '40%', min: 200 }, { size: '60%', min: 200 }] });;
            //$('.split-panel .panel-body').css('max-height', (fixedHeight - 15) + 'px');
            $('.split-panel .panel-body').css('max-height', (fixedHeight - 40) + 'px');
            // END - SPLIT-PANE

            // BEGIN - HIGHLIGHT SELECTED FEEDBACK
            $('.feedback-list > a').on('click', function () {
                var id = this.id.substr(10);
                viewContent(id);
            });
            // END - HIGHLIGHT SELECTED FEEDBACK

            // BEGIN - DELETE FEEDBACK
            $('#feedback-list').on('click', '.rbvh-btn-remove-feedback', function (evt) {
                var id = this.attributes['data-feedback-id'].value;
                $('#DeleteFeedbackModal .modal-footer .btn-ok').attr('onclick', 'removeEntity("' + id + '", "Feedback")');
            });
            // END - DELETE FEEDBACK

            // BEGIN - DELETE COMMENT
            $('#feedback-content').on('click', '.rbvh-btn-remove-comment', function (evt) {
                var $divBody = $('#DeleteCommentModalBody'),
                    $divForm = $('#delete-comment-form'),
                    url = $(this).data('url');

                $.get(url, function (data) {
                    $divBody.html(data);
                    $.validator.unobtrusive.parse($divForm);
                });
            });

            $('#DeleteCommentModal').on('hidden.bs.modal', function () {
                $('#DeleteCommentModalBody').html('');
            });
            // END - DELETE COMMENT
        });
    </script>
}